<template>
	<view class="Nutrition">
		<view class="list">
			<view class="van-cell" @click="showPopup(true)"><text>{{ Nutrition.name }}</text></view>
			<view class="mask" v-if="show" @click="showPopup(false)"></view>
			<view class="van-popup" :class="show?'up':'down'">
				<ul>
					<li v-for="(item, index) in NutritionList" :key="index">
						<text :class="[
				        emojiBlock == index ? 'active' : '',
				        Nutrition == item.name ? 'activeName' : '',
				      ]" @touchstart="emojiBlock = index" @touchend="emojiBlock = -1"
							@click="$emit('toggle-nutrition', item), showPopup(false)">{{ item.name }}</text>
					</li>
				</ul>
			</view>
		</view>

		<view class="list_health" v-if="Nutrition.index == 1 && isHearth_light == true">
			<image @click="$emit('toggle-health',true)" v-if="!isHealth" src="../../static/ic_food_check_default.png" />
			<image @click="$emit('toggle-health',false)" v-else src="../../static/ic_food_check_highlight.png" />
			<text>推荐食物</text>
		</view>

		<view class="list_order" v-if="Nutrition.index != 1">
			<ul>
				<li v-if="order == 0" @click="$emit('order-by', 1)">
					<text>由高到低</text>
					<image src="../../static/ic_food_ordering_down.png" alt="" />
				</li>
				<li v-if="order == 1" @click="$emit('order-by', 0)">
					<text>由低到高</text>
					<image src="../../static/ic_food_ordering_up.png" alt="" />
				</li>
			</ul>
		</view>
	</view>
</template>

<script>
	export default {
		name: "NutritionList",
		props: ["Nutrition", "order", "isHealth", "isHearth_light"],
		data() {
			return {
				show: false,
				NutritionList: [],
				emojiBlock: -1,
			};
		},
		created: function() {
			uni.request({
				url: `https://food.boohee.com/fb/v1/foods/sort_types`,
				success: (res) => {
					this.NutritionList = res.data.types;
				}
			})
		},
		methods: {
			showPopup(e) {
				this.show = e;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.Nutrition {
		height: 45px;
		line-height: 45px;
		background: white;
		border-bottom: 1px solid #dfdee1;
		padding-right: 12px;
		padding-left: 8px;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.list {
			.van-cell {
				padding: 10px;
				font-size: 14px;
			}
			.mask{
				position: fixed;
				left: 0;
				bottom: 0;
				background-color: rgba(0,0,0,0.5);
				width: 100%;
				height: 100%;
				z-index: 2;
			}
			.up{
				transform: translateY(-100%);
			}
			.down{
				transform: translateY(0);
			}
			.van-popup {
				position: fixed;
				left: 0;
				bottom: -40%;
				height: 40%;
				z-index: 3;
				background-color: white;
				overflow-y: auto;
				transition: all .5s;
				ul {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					flex-wrap: wrap;
					padding: 0;
					list-style: none;

					li {
						width: 33%;
						height: 40px;
						line-height: 40px;
						margin: 10px 0;

						text {
							display: block;
							font-size: 14px;
							padding: 0 20%;
						}
					}

					.active {
						background-color: #dadada;
					}

					.activeName {
						color: #ff6569;
					}
				}
			}
		}

		.list_order {
			ul {
				padding: 0;
				list-style: none;
				margin-right: 8px;

				li {
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 15px;
						height: 15px;
					}

					text {
						color: #ff4444;
						font-size: 13px;
					}
				}
			}
		}

		.list_health {
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 25px;
				height: 25px;
			}

			text {
				font-size: 15px;
				color: #FF3301;
			}
		}
	}
</style>
